$header-caret-width: 0.35em;

.top-app-bar {
  background-color: var(--#{$prefix}primary);
  color: var(--#{$prefix}on-primary);

  --#{$prefix}link-color: var(--#{$prefix}on-primary-secondary);
  --#{$prefix}link-hover-color: var(--#{$prefix}on-primary);
  --#{$prefix}navbar-color: var(--#{$prefix}on-primary-secondary);
  --#{$prefix}navbar-hover-color: var(--#{$prefix}on-primary);
  --#{$prefix}navbar-active-color: var(--#{$prefix}on-primary);
  --#{$prefix}navbar-disabled-color: var(--#{$prefix}on-primary-disabled);
  --#{$prefix}navbar-brand-color: var(--#{$prefix}on-primary-secondary);
  --#{$prefix}navbar-brand-hover-color: var(--#{$prefix}on-primary);
  --#{$prefix}form-control-bg: var(--#{$prefix}primary-secondary);

  .offcanvas-lg,
  .offcanvas-xxl {
    --#{$prefix}offcanvas-bg: var(--#{$prefix}primary);
    --#{$prefix}offcanvas-color: var(--#{$prefix}on-primary);
  }

  .logo {
    height: 32px;
    width: auto;
    margin-right: 0.5rem;

    @if $logo-animation {
      &:hover {
        transform: rotate(-5deg) scale(1.1);
      }
    }
  }

  a {
    &:hover {
      text-decoration: none;
    }
  }

  nav {
    --#{$prefix}nav-link-color: var(--#{$prefix}on-primary-secondary);
    --#{$prefix}nav-link-hover-color: var(--#{$prefix}on-primary);
    --#{$prefix}nav-link-active-color: var(--#{$prefix}on-primary);
  }

  .nav-link {
    @include media-breakpoint-up(xxl) {
      &.active {
        position: relative;

        --#{$prefix}body-color: var(--#{$prefix}body-color);

        &::before {
          content: '';
          position: absolute;
          left: calc(50% - #{$header-caret-width});
          top: calc(100% + #{$header-caret-width} * 1.25);
          border-left: $header-caret-width solid transparent;
          border-right: $header-caret-width solid transparent;

          // unable to access the :root variable --#{$prefix}body-bg, use SCSS variable instead.
          border-bottom: $header-caret-width solid #{$body-bg};
        }
      }
    }
  }

  .search-bar {
    @include media-breakpoint-up(xxl) {
      width: 180px;
    }

    .search-input {
      padding-left: 2rem;
    }

    .search-shortcut {
      margin-top: 0.35rem;
    }
  }

  .dropdown-item-icon {
    background-color: var(--#{$prefix}secondary-bg);
  }

  .dropdown-item-description {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;

    @include media-breakpoint-down(md) {
      display: none;
    }
  }

  .dropdown-item {
    --#{$prefix}dropdown-item-padding-y: 0.5rem;

    &:hover,
    &:active,
    &.active,
    &:focus {
      .dropdown-item-icon {
        .svg-inline--fa { /* stylelint-disable-line */
          color: var(--#{$prefix}primary);
        }
      }

      .dropdown-item-description {
        color: rgba(255, 255, 255, 0.7) !important;
      }
    }
  }

  .social-link {
    &:hover {
      top: unset;
    }
  }
}

@if not $colored-top-app-bar-in-dark {
  @include theme(dark) {
    .top-app-bar {
      background-color: var(--#{$prefix}surface-bg);
      color: var(--#{$prefix}surface-color-secondary);

      --#{$prefix}form-control-bg: var(--#{$prefix}surface-bg);

      .offcanvas-lg,
      .offcanvas-xxl {
        --#{$prefix}offcanvas-bg: var(--#{$prefix}surface-bg);
        --#{$prefix}offcanvas-color: var(#{$prefix}surface-color-secondary);
      }
    }
  }
}

.font-size-dropdown-menu,
.mode-dropdown-menu,
.language-dropdown-menu {
  min-width: 1px;
}
